<template>
	<view class="addTask">
		<view>
			<view class="top">
				<view class="com df" style="align-items: center;">
					<view class="location-container" v-if="mailInfo.name">
						<u-icon name="map-fill" label=" " size="24"></u-icon>
							<view class="profile">
								<view>
									<text>{{mailInfo.name}}</text>
									<text>{{mailInfo.phone}}</text>
								</view>
								<view class="location">{{mailInfo.site}}</view>
							</view>
					</view>
					<view v-else>
						<u--text  bold align="center" type="info" text="还没有默认收货地址"></u--text>
					</view>
					<u--text align="right" type="warning" :text="mailInfo.name ? '编辑':'新增'" style="flex:none;width: unset;" @click="edit()"></u--text>
				</view>
				
				<view class="com df center">
					<view class="type df">
						<view class="mask">
							<view class="picture">
								<u-image :show-loading="true" :src="currentGoods.outputGoodsPicture" mode="" width="120" height="120" radius="12"></u-image>
							</view>
							<text class="desc">{{currentGoods.outputGoods}}</text>
						</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt" >部位</view>
					<view class="type df">
						<view class="text">{{currentGoods.part}}</view>
					</view>
				</view>
				<view class="com df" >
					<view class="tt">产出物</view>
					<view class="type df">
						<view class="text">{{currentGoods.outputGoods}}</view>
					</view>
				</view>
				<view class="com df" style="border: 0;" >
					<view class="tt">数量</view>
					<view class="type df fontColor">
						<view class="text">{{currentGoods.outputNum}}g</view>
					</view>
				</view>
				<view style="font-size: 28rpx;color: rgba(68, 78, 104, 0.7);">当前已采收</view>
				<view class="com df" style="overflow: auto;">
					<view class="type df">
						<view class="text outPut" v-for="item in goods" :key="item.outputId" @click="choose(item)">{{item.outputNum}}g</view>
					</view>
				</view>
				<view class="com df" style="border: 0;" >
					<view class="tt">运费</view>
					<view class="type df fontColor">
						<view class="text">{{deliveryPrice}}</view>
					</view>
				</view>
			</view>
		</view>
			<button class="bottom-btn" @tap="confirm">确认邮寄</button>
	</view>
</template>

<script>
	import {findMailGoodsInfo,mailGoods} from "@/api/api.js"
	export default {
		data() {
				return {
					deliveryPrice:'免运费',
					landMsgId:'',
					mailInfo:{
						name:'',
						phone:'',
						site:'',
					},
					currentGoods:{},
					goods:[]
				}
			},
			onLoad(params){
				console.log(params.landMsgId);
				if(params.landMsgId){
					this.landMsgId = params.landMsgId
				}
			},
			onShow() {
				this.getMailInfo()
			},
			methods: {
				async confirm(){
					uni.showLoading({
						mask:true
					})
					let query = `outGoodsId=${this.currentGoods.outputId}&addressId=${this.mailInfo.addressId}`
					const res = await mailGoods(query)
					try{
						if(res?.data.code == 200){
							uni.showToast({
								title:res.data.msg,
								icon:"success"
							})
							uni.hideLoading()
							setTimeout(()=>{
								this.getMailInfo()
							},1000)
						}else{
							uni.hideLoading()
							uni.showToast({
								title:res.data.msg,
								icon:"error"
							})
						}
					}catch(e){
						//TODO handle the exception
						uni.hideLoading()
						uni.showToast({
							title:e,
							icon:"error"
						})
						throw e
					}
				},
				choose(item){
					uni.showLoading({
						mask:true
					})
					setTimeout(()=>{
						if(item){
							this.currentGoods = item
							uni.hideLoading()
						}else{
							uni.hideLoading()
							uni.$u.toast('出错了，请重启小程序')
						}
					},300)
				},
				async getMailInfo(){
					uni.showLoading({
						title:"",
						mask:true
					})
					let query = `landMsgId=${this.landMsgId}`
					const res = await findMailGoodsInfo(query)
					console.log(res);
					if(res?.data.code == 200){
						this.mailInfo = res.data.data
						this.currentGoods = this.mailInfo.goods[0]
						this.goods = this.mailInfo.goods
						uni.hideLoading()
					}else{
						uni.showToast({
							icon:'error',
							title:res.data.msg
						})
						uni.hideLoading()
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				},
				urge(){
					uni.showToast({
						icon:'success',
						title:'成功'
					})
				},
				edit(){
					console.log('点击了编辑地址');
					uni.navigateTo({
						url:"/pages/user/profileEdit"
					})
				},
			}
		}
</script>

<style lang="scss" scoped>
	html{
		position: relative;
		$btnWidth:300rpx;
			.bottom-btn{
				position: absolute;
				background-color: #17CC77;
				color: #FFFFFF;
				width:$btnWidth;
				height: 80rpx;
				line-height: 80rpx;
				left: calc(50% - 300rpx/2);
				bottom: 40rpx;
				&:active{
					opacity: .8;
				}
			}
	}
	.fontColor{
		color:#CF4033;
	}
	.outPut{
		padding:10rpx;
		background-color: #1BC46D;
		color: #FFFFFF;
		border-radius: 4rpx;
	}
	.mask{
		background-color: #efefef;
		border-radius: 24rpx;
		height: 280rpx;
		width: 690rpx;
		position: relative;
		.picture{
			display: inline-block;
			margin: 20rpx;
		}
		
		.desc{
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			top:20rpx;
			position: absolute;
		}
	}
	.location-container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.profile{
			padding: 20rpx;
			width: 510rpx;
			view text:nth-child(1){
				font-weight: 600;
				font-size: 30rpx;
			}
			view text:nth-child(2){
				font-size: 28rpx;
				margin-left: 30rpx;
			}
			.location{
				margin-top: 20rpx;
				color: #737373;
				font-size: 26rpx;
			}
		}
	}
	.center{
		justify-content: center !important;
		align-items: center !important;
	}
	.addTask {
		.df {
			display: flex;
		}
		
		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.com {
				justify-content: space-between;
				font-size: 30rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.type {
					// color: #17CC77;

					.text {
						margin-right: 18rpx;
					}

					.input {
						margin-top: -20rpx;
						width: 180rpx;
					}

					.image {
						width: 12rpx;
						height: 22rpx;

						image {
							margin-top: 10rpx;
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}

		.btn {
			position: absolute;
			bottom: 91rpx;
			left: 50%;
			margin-left: -140rpx;
			width: 280rpx;
			height: 84rpx;
			background: #1BC46D;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
			border-radius: 12rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>